<template>
  <div class="home">
    <!-- 1. 轮播图 -->
    <section class="carousel-section">
      <el-carousel height="400px" indicator-position="none">
        <el-carousel-item v-for="(item, index) in image" :key="index">
          <div class="image">
            <img :src="item.img" class="image" />
          </div>
        </el-carousel-item>
      </el-carousel>
    </section>

    <!-- 2. 公司介绍 -->
    <section class="introduction-section">
      <div class="view-foll">
        <div class="content-view" v-scroll-fade>
          <div class="look-form">11</div>
        </div>
        <div class="view-pot">
          <img
            v-scroll-fade="'left'"
            class="pot-left"
            src="https://20560495.s61i.faiusr.com/2/AD0I7-TmCRACGAAgyf7x7AUogInU6QcwlwQ4gAU.jpg.webp"
            alt=""
          />
          <div class="pot-right" v-scroll-fade>
            <div class="pot-box" v-for="i in 4" :key="i">
              <img
                src="https://20560495.s61i.faiusr.com/4/AD0I7-TmCRAEGAAg7oDy7AUosPTfiwcwvwE4tAE.png.webp"
                class="image-ma"
              />
              <span>芦荟提取物</span>
              <span style="font-size: 14px; color: #999999">抗敏舒缓</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 3. 详情展示 -->
    <section class="details-section">
      <div class="box-row" v-scroll-title>
        <div class="box-item">
          <div class="title-green">
            <NumberRoll :target-number="3500" :duration="4000" />
          </div>
          <span class="tier">成立Advertising</span>
        </div>
        <div class="box-item">
          <div class="title-green">
            <NumberRoll :target-number="4875" :duration="4000" />
          </div>
          <span class="tier">配方Formula</span>
        </div>
        <div class="box-item">
          <div class="title-green">
            <NumberRoll :target-number="4900" :duration="4000" />
          </div>
          <span class="tier">客户Client</span>
        </div>
        <div class="box-item">
          <div class="title-green">
            <NumberRoll :target-number="4520" :duration="4000" />
          </div>
          <span class="tier">满意satisf</span>
        </div>
      </div>
    </section>

    <!-- 4. 用户量展示 -->
    <section class="users-section" v-scroll-fade>
      <div class="user-1">
        <div class="tomber">
          <span style="font-size: 24px; color: #333333">
            多种配方 · 为您定制产品
          </span>
          <span style="font-size: 14px; color: #a8a8a8">
            Customized product
          </span>
        </div>
        <div class="treeform">
          <div class="terrs-ma" v-for="v in 3" :key="v">
            <img
              class="terrs-img"
              src="https://20560495.s61i.faiusr.com/2/AD0I7-TmCRACGAAg9Yfy7AUogIyUowcw-AI48AI.jpg.webp"
              alt=""
            />
            <div class="terrs-title">
              <span style="font-size: 24px; color: #4c4c4c">基础护肤品</span>
              <span style="font-size: 14px; color: #999999">
                洗面乳、洗发液、卸妆油
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="user-2">
        <img
          class="user-22"
          src="https://20560495.s61i.faiusr.com/2/AD0I7-TmCRACGAAgoIvy7AUoj-6PlQYwsAk4nAQ.jpg"
          alt=""
        />
      </div>
      <div class="user-3">
        “科技创造未来“我们的企业宗旨，我们一直视化妆品配方技术为企业的核心价值，发挥双研发中心的技术优势，为中国化妆品的行业精英持续提供技术增值服务。
        致力自然主义化妆品的研究，我们认为化妆品不是工业品，是高科技和自然额结合，对提取物做认真负责的研究，探寻以自然生命力肌肤问题
      </div>
    </section>

    <!-- 5. 产品展示 -->
    <section class="products-section" v-scroll-fade>
      <div class="user-1">
        <div class="tomber">
          <span style="font-size: 24px; color: #333333">
            合作客户 · 用心打造好产品
          </span>
          <span style="font-size: 14px; color: #a8a8a8">Customer case</span>
        </div>
        <div class="treeform">
          <div class="fors-two" v-for="i in 4" :key="i">
            <div class="product-img">
              <img
                class="product-img"
                src="https://20560495.s61i.faiusr.com/2/AD0I7-TmCRACGAAg6o3y7AUo0Nbe-AcwugQ44AI.jpg.webp"
                alt=""
              />
            </div>
            <div class="product-title">
              <span style="font-size: 24px; color: #4c4c4c">补水保湿系列</span>
              <span style="font-size: 14px; color: #999999">
                帮助肌肤适应各种气候，即便经历冷热交替，也能开启自身蓄水锁水机制，保持长效水油平衡,水动力满格
              </span>
            </div>
          </div>
        </div>
        <div class="logo-img">
          <div class="five-box" v-for="i in 6" :key="i">
            <img
              class="five-box"
              src="https://20560495.s61i.faiusr.com/4/AD0I7-TmCRAEGAAg6o7y7AUo8LGSxgEwmwE4QQ.png.webp"
              alt=""
            />
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import NumberRoll from '@/components/NumberRoll/index.vue'

import { ref } from 'vue'
const image = ref([
  {
    title: '',
    img: 'https://20560495.s61i.faiusr.com/2/AD0I7-TmCRACGAAg8I3y7AUonIudJTC6BDjgAg.jpg.webp',
  },
  {
    title: '',
    img: 'https://20560495.s61i.faiusr.com/2/AD0I7-TmCRACGAAg_I3y7AUo4LufQjC6BDjgAg.jpg.webp',
  },
  {
    title: '',
    img: 'https://20560495.s61i.faiusr.com/2/AD0I7-TmCRACGAAg7PTx7AUot92pwwcwgA84oAY.jpg.webp',
  },
  {
    title: '',
    img: 'https://20560495.s61i.faiusr.com/2/AD0I7-TmCRACGAAg8I3y7AUonIudJTC6BDjgAg.jpg.webp',
  },
])
</script>

<style scoped lang="scss">
.home {
  display: flex;
  flex-direction: column;
}
section {
  background-color: #ffffff;
}
.carousel-section {
  padding: 0;
}
.introduction-section {
  height: 900px;
  padding: 5% 10%;
  .view-foll {
    height: 100%;
    .content-view {
      height: 200px;
      padding: 10px 15px;
      .look-form {
        height: 180px;
        background: #ffffff;
        border-radius: 4px;
        box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
      }
    }
    .view-pot {
      display: flex;
      height: 600px;
      .pot-left,
      .pot-right {
        padding: 20px;
      }
      .pot-left {
        width: 40%;
      }
      .pot-right {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        width: 60%;
        .pot-box {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: calc(50% - 10px);
          height: 270px;
          .image-ma {
            width: 150px;
            height: 150px;
            object-fit: contain;
          }
        }
      }
    }
  }
}
.details-section {
  height: 200px;
  padding: 20px 10%;
  background: rgb(248 248 246);
  .box-row {
    display: flex;
    gap: 200px;
    .box-item {
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      width: 150px;
      height: 160px;
      .title-green {
        font-size: 42px;
        color: #5d7d60;
      }
      .tier {
        font-size: 14px;
        color: #b2b2b2;
      }
    }
  }
}
.users-section {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: 1300px;
  background: rgb(248 248 246);
  .user-1 {
    display: flex;
    flex-direction: column;
    height: 800px;
    padding: 60px 10%;
    background: #ffffff;
    .tomber {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 80px;
    }
    .treeform {
      display: flex;
      flex-direction: row;
      gap: 86px;
      height: 400px;
      .terrs-ma {
        display: flex;
        flex-direction: column;
        width: 350px;
        height: 400px;
        .terrs-img {
          width: 100%;
          height: 320px;
        }
        .terrs-title {
          display: flex;
          flex-direction: column;
          padding: 15px 20px;
        }
      }
    }
  }
  .user-2 {
    position: absolute;
    top: 50%;
    left: 20%;
    display: flex;
    width: 900px;
    height: 450px;
    .user-22 {
      width: 900px;
      height: 450px;
      object-fit: cover;
    }
  }
  .user-3 {
    position: absolute;
    bottom: 0;
    left: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 900px;
    height: 200px;
    font-size: 14px;
    color: #999999;
    text-align: center;
  }
}
.products-section {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: 1300px;
  .user-1 {
    display: flex;
    flex-direction: column;
    padding: 60px 10%;
    background: #ffffff;
    .tomber {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 80px;
    }
    .treeform {
      display: flex;
      flex-shrink: 0;
      flex-wrap: wrap;
      gap: 0 80px;
      height: 1000px;
      .fors-two {
        width: 560px;
        height: 430px;
        .product-img {
          width: 100%;
          height: 360px;
        }
        .product-title {
          display: flex;
          flex-direction: column;
          height: 70px;
          padding: 15px 20px;
          background: #ffffff;
        }
      }
    }
    .logo-img {
      display: flex;
      gap: 30px;
      justify-content: center;
      height: 150px;
      .five-box {
        width: 200px;
        height: 80px;
        cursor: pointer;
        object-fit: contain;
      }
    }
  }
}
.el-carousel {
  width: 100%;
  height: 400px;
}
.image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
</style>
